import React from 'react';
import {
  Dialog as MuiDialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Button,
  Typography,
} from '@mui/material';
import { useAppSelector, useAppDispatch } from '../../redux/hooks';
import { closeBackendErrorDialog } from '../../redux/slices/errorsSlice';

const ErrorDialog: React.FC = () => {
  const dispatch = useAppDispatch();
  const { openDialog, errorMessage, errorDetails } = useAppSelector((state) => state.errors);

  const handleClose = () => {
    dispatch(closeBackendErrorDialog());
  };

  return (
    <MuiDialog open={openDialog} onClose={handleClose} maxWidth="md" fullWidth>
      <DialogTitle>Error</DialogTitle>
      <DialogContent>
        <Typography variant="body1" color="error" gutterBottom>
          {errorMessage}
        </Typography>
        {errorDetails && (
          <Typography variant="body2" sx={{ mt: 2, fontFamily: 'monospace', fontSize: '0.75rem' }}>
            {errorDetails}
          </Typography>
        )}
      </DialogContent>
      <DialogActions>
        <Button onClick={handleClose} variant="contained">
          Close
        </Button>
      </DialogActions>
    </MuiDialog>
  );
};

export default ErrorDialog;

